<template>
    <div>
        <div class="login">
            <div class="c">
                <h2>选择困难</h2>
            </div>
            <div class="inp">
                <el-input v-for="(item,index) in a" :key="index" v-model="item.value" placeholder="请输入内容" id="p"
                          style="width: 30%;margin: 5px 5px">
                    <i class="el-icon-remove-outline" slot="append" style="font-size: 18px;"
                       @click="del(index)"></i>
                </el-input>
            </div>
        </div>
        <div style="display: flex;width:30%; margin-bottom: 5px;">
            <i class="el-icon-circle-plus-outline" style="padding:0 10px; font-size: 2rem;cursor: pointer;"
               @click="add"></i>
            <el-button @click="y" type="primary" id="b">查询</el-button>
        </div>
    </div>


</template>

<script>
    export default {
        name: "RandomLift",
        data() {
            return {
                a: [{value: ""}],
            }
        },
        methods: {
            add() {
                this.a.push({value: ""})
            },
            y() {
                if (this.a.length) {
                    let status = true;
                    this.a.forEach((item, index) => {
                        if (item.value === "") {
                            this.$message.warning("请填写第" + (index + 1) + "个输入框");
                            status = false;
                            throw new Error("error")
                        }
                    })
                    if (status) {
                        let i = Math.ceil(Math.random() * (this.a.length));
                        alert(this.a[i - 1].value)
                    }
                }
            },

            del(index) {
                if (index === 0) {
                    this.$message.warning("不能删除第一个")
                } else {
                    this.a.splice(index, 1);
                }
            }
        },
        created() {
            console.log(document.title)
        }
    }
</script>

<style scoped>
    .login {
        border: 1px solid #ccc;
        min-height: 300px;
    }

    .login .c h2 {
        text-align: center;
    }

    i {
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>